<template>
  <div class="music-uploader">
    <el-row v-if="!sourceUrl&&!progressShow">
      <el-upload
        class="uploader"
        :action="action"
        :show-file-list="showFileList"
        :accept="accept"
        :multiple="multiple"
        :limit="limit"
        :on-exceed="onExceed"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
        :list-type="listStyle"
        :http-request="uploads">
        <i class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <div class="form-item-tip" style="line-height: 35px">上传歌词支持.MP3格式</div>
    </el-row>
    <p v-if="progressShow">
      <el-progress :percentage="percentage"></el-progress>
    </p>
    <el-row v-if="sourceUrl">
      <div>
        <el-button size="mini" @click="handleReUpload" type="primary">重新上传</el-button>
        <el-button size="mini" @click="handlePreview" type="primary">预览</el-button>
      </div>
    </el-row>

    <el-dialog
      title="音乐预览" :visible.sync="dialogVisible" width="60%" class="img-preview-dialog"
      :before-close="beforeClose"
    >
      <div class="tx-c" ref="video">
        <video v-if="playUrl" controls="" autoplay="" name="media" >
          <source :src="playUrl" type="audio/mpeg">
        </video>
      </div>
    </el-dialog>
  </div>
</template>

<!--图片上传组件-->
<script>
  import qnUpload from '@/utils/qiniu'

  export default {
    name: 'ImgUpload',
    data() {
      return {
        dialogVisible: false,
        percentage: 0,
        playUrl:'',
        progressShow:false
      }
    },

    methods: {
      handlePreview(){
       this.dialogVisible=true
        this.playUrl = this.sourceUrl
      },
      beforeClose(done){
        this.playUrl = ""
        done()
      },
      handleReUpload() {
        this.progressShow = false
        this.percentage = 0
        this.$emit('upload-callback', '')
      },
      handleSuccess(url) {
        this.$emit('upload-callback', url)
      },
      handleProgress(res){
        this.progressShow = true
        this.percentage = Math.ceil(res.percent)
      },
      uploads(file) {
        const upload = {
          mediaType:'audio',
          value:file,
          uploadTo:this.uploadFrom,
          uploadType:'normal',
          callback:{
            success:this.handleSuccess,
            progress:this.handleProgress
          }
        }
        qnUpload.upload(upload)
      }
    },
    props: {
      sourceUrl: String,
      action: {
        type: String,
        default: '11'
      },
      accept: {
        type: String,
        default: '.mp3,.mpeg'
      },
      showFileList: {
        type: Boolean,
        default: false
      },
      multiple: {
        type: Boolean,
        default: false
      },
      listStyle: '',
      limit: {
        type: Number,
        default: 1
      },
      onExceed: {
        type: Function,
        default: function (files, fileList) {
          this.$message.warning('已达到最大上传数量')
        }
      },
      handleAvatarSuccess: Function,
      beforeAvatarUpload: {
        type: Function,
        default: function (file) {
          const isLt10M = file.size / 1024 / 1024 < 10
          const musicType = ['audio/mp3', 'audio/mpeg']
          if (musicType.indexOf(file.type) === -1) {
            this.$message.error('请上传正确的音频格式')
            return false
          }

        }
      },
      upload: Function,
      uploadFrom: {
        type: String,
        default: ''
      }
    }
  }
</script>

<style lang="scss">
  .music-uploader {
    width: 249px;

    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .el-upload:hover {
      border-color: #409EFF;
    }

    .avatar-uploader-icon {
      font-pageSize: 28px;
      color: #8c939d;
      width: 120px;
      height: 120px;
      line-height: 120px;
      text-align: center;
    }

    .img-preview-dialog {
      max-height: 95%;
      overflow: auto;
    }

    .preview {
      width: 100%;
      height: auto;
    }
  }
</style>
